<template>
  <tm-app ref="app">
    <tm-navbar :title="data.title"></tm-navbar>
    <tm-sheet :padding="[20]" :margin="[0]">
      <tm-text _class="text-weight-b" :font-size="30">基本信息</tm-text>
    </tm-sheet>
    <tm-sheet :margin="[20]" :padding="[0]" :border="20"  :round="2" color="#d9e3f5"  >
      <view class="flex company-list">
        <view class="lf-lable">名称</view>
        <view class="flex-sub flex alItem">{{  data.detailInfo.name  || data.detailInfo.label}}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">类型</view>
        <view class="flex-sub flex alItem">{{  data.detailInfo.typeName }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">代码</view>
        <view class="flex-sub flex alItem">{{  data.detailInfo.code }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">简称</view>
        <view class="flex-sub flex alItem">{{  data.detailInfo.name}}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">标识</view>
        <view class="flex-sub flex alItem">{{  data.detailInfo.code }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">创建时间</view>
        <view class="flex-sub flex alItem">{{ data.detailInfo.metadata?.createTime || data.detailInfo.createTime }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">更新时间</view>
        <view class="text-weight-b flex-sub flex alItem">{{ data.detailInfo.updateTime }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">简介</view>
        <view class="text-weight-b flex-sub flex alItem pd10">{{  data.detailInfo.remark }}</view>
      </view>
    </tm-sheet>
  </tm-app>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import * as config from './config/menuOperate';
import { reactive } from 'vue';
const data =  reactive<any>({
  title: '详情',
  detailInfo: {}
})
onLoad(async (query) => {
  if (query && query.item) {
    let item = JSON.parse(query.item)
    console.log(item,'item')
    if(!item.key) {
      data.detailInfo = item
    }else{
      let res = await config.loadSettingMenu();
      findObject(res.children,item.key)
    }

  }
})
async function findObject(arr: any[],key: any) {
  arr.forEach((item) => {
    if(item.key === key) {
      getMenuList(item)
    }
    if(item.children && item.children.length > 0){
      findObject(item.children,key)
    }
  })
}
async function getMenuList(obj: { item: { directory: any; }; }){
  data.detailInfo = obj.item.directory

}
</script>

<style lang="scss">
  @import '../../common/style/global.scss';
  .company-list{
    font-size: 16px;
    /* padding:15px; */
    /* height: 50px;
    line-height: 50px; */
    border-bottom: 2px solid #eaeef5;
    background-color: #fff;
    min-height: 50px;
    color: #666667;
  }
  .flex-sub{
    flex: 1;
    text-align: left;
    padding-left: 20px;
  }
  .lf-lable{
    width: 100px;
    // color: #6f7686;
    border-right: 2px solid #eaeef5;
    display: flex;
    align-items: center;
    text-indent: 10px;
    background: #f5f6fd;
  }
  .alItem{
    align-items: center;
  }
</style>